<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>购物车 - 聚美优品</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/Shopping-Cart.css">
  <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
  <script src="./js/jquery-3.3.1.js"></script>
  <script src="./js/Shopping-Cart.js"></script>
</head>

<body>
  <!-- 顶部导航 -->
  <div class="nav-top">
    <div class="common">
      <ul>
        <li><span>欢迎您 ,
            <a href="#" class="name">赵恒</a> </span></li>
        <li><a href="#">[退出] <i>|</i> </a></li>
        <li><a href="#">订单查询</a></li>
      </ul>
    </div>
  </div>

  <!-- logo部分 -->
  <div class="logo">
    <div class="common">
      <!-- logo-pic -->
      <a href="#">
        <img src="./image/cart_logo.jpg" alt="">
      </a>
      <!-- 物流进程 -->
      <div class="logistics">

      </div>
    </div>
  </div>

  <!-- prise部分 -->
  <div class="prise">
    <div class="common">
      <!-- prise-top顶部部分 -->
      <div class="prise-top">
        <!-- 左边部分 -->
        <div class="prise-top-left">
          <i></i>
          <span>请在</span>
          <div id="timer" style="color:#ed145b; font-size: 14px;"></div>内去结账,并在下单后20分钟内完成支付 [<span>?</span> ]
        </div>
        <!-- 右边部分 -->
        <div class="prise-top-right">
          <ul>
            <li>

              <span>
                <i></i>
                真品防伪码
              </span>
            </li>
            <li>
              <span>
                <i></i>
                30天无条件退货
              </span>
            </li>
            <li>
              <span>
                <i></i>
                美妆满2件或299元包邮
              </span>
            </li>
          </ul>
        </div>
        <!-- 下面部分 -->
        <div class="prise-top-bottom">
          <span>
            <i>包邮</i>
            自营非食品类满两件或满299元包邮
          </span>
        </div>
      </div>
      <!-- 商品金额部分 -->
      <div class="wrapper">
        <div class="common">
          <!-- 商品金额顶部部分 -->
          <div class="wrapper-top">
            <!-- 左边部分 -->
            <div class="wrapper-top-left">
              <input type="checkbox" name="" id="" checked class="btn">
              <h2>聚美优品发货</h2>
            </div>
            <!-- 右边部分 -->
            <div class="wrapper-top-right">
              <ul>
                <li>聚美价（元）</li>
                <li>数量</li>
                <li>小计（元）</li>
                <li>操作</li>
              </ul>
            </div>
          </div>
          <!-- 商品金额中间部分 -->
          <div class="wrapper-center">
            <!-- 左边部分 -->
            <div class="wrapper-center-left">
              <input type="checkbox" name="" id="" checked class="btn1">

              <div class="wrapper-center-left-text">
                <img src="./image/wrapper-center-left-small.jpg" alt="">
                <span> <s>[急速免税]</s> <a href="#">意大利•阿玛尼（Armani）明星唇部彩妆经典...</a> </span>
                <br>
                <b> 型号：502+504 &nbsp;容量：3.8g+6.5ml</b>
              </div>
            </div>
            <!-- 右边部分 -->
            <div class="wrapper-center-right">
              <ul>
                <li>480.00</li>
                <li class="two">
                  <span>-</span>
                  <input type="text" name="" id="word" value="1">
                  <span>+</span>
                </li>
                <li>
                  <span>480.00</span>
                </li>
                <li>
                  <a href="#"></a>
                </li>
              </ul>
            </div>

          </div>
          <!-- 商品金额底部部分 -->
          <div class="wrapper-bottom">
            <div class="wrapper-bottom-txt">
              商品金额:&nbsp; <span>¥480.00</span>
            </div>
          </div>
        </div>
      </div>

      <!--结算部分  -->
      <div class="Settlement">
        <div class="common">
          <!-- 结算左边部分 -->
          <div class="Settlement-left">
            <input type="checkbox" name="" id="chec" checked>
            全选
            <a href="./index.html">继续购物</a>
            <b>|</b>
            <a href="#">清空选中商品</a>
          </div>
          <!-- 结算右边部分 -->
          <div class="Settlement-right">
            共<span>1</span> 件商品 &nbsp;&nbsp;&nbsp; 商品应付总额：
            <span><b> ¥480</b></span>
            <a href="./order.html"  class="prise-btn">去结算</a>

          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- prise底部 -->
  <div class="prise-footer">
    <div class="common">
      <div class="prise-top-left">
        <i></i>
        <span>请在</span>
        <div id="timer1" style="color:#ed145b; font-size: 14px;"></div>内去结账,并在下单后20分钟内完成支付 [<span class="fuhao">?</span>
        ]
      </div>
    </div>
  </div>

  <!-- 今日备受欢迎 -->
  <div class="today-welcome">
    <div class="common">
      <!-- 顶部部分 -->
      <div class="today-welcome-top">
        <h2>今日备受欢迎</h2>
      </div>
      <!-- content部分 -->
      <div class="today-welcome-content">
        <ul>
          <!-- 第一个 -->
          <li>
            <img src="./image/today-welcome-content-1.jpg" alt="">
            <a href="#">
              <span>7.5折/</span>
              Purevivi皇后化妆棉50枚*3盒，如云朵般的护肤助手
            </a>
            <p>
              <span>¥15.0</span>
              <s>¥19.90</s>
            </p>
            <input type="button" value="加入购物车" class="today-btn">
          </li>
          <!-- 第二个 -->
          <li>
            <img src="./image/today-welcome-content-2.jpg" alt="">
            <a href="#">
              <span>4.9折/</span>
              菲诗小铺植物防晒隔离霜35g，告别暗沉！
            </a>
            <p>
              <span>¥26.0</span>
              <s>¥53.00</s>
            </p>
            <input type="button" value="加入购物车" class="today-btn">
          </li>
          <!-- 第三个 -->
          <li>
            <img src="./image/today-welcome-content-3.jpg" alt="">
            <a href="#">
              <span>7.3折/</span>
              百草味 猪肉脯100g 肉脯熟食零食
            </a>
            <p>
              <span>¥22.5</span>
              <s>¥30.90</s>
            </p>
            <input type="button" value="加入购物车" class="today-btn">
          </li>
          <!-- 第四个 -->
          <li>
            <img src="./image/today-welcome-content-4.jpg" alt="">
            <a href="#">
              百草味 夹心麻薯210g 零食糕点小吃
            </a>
            <p>
              <span>¥23.5</span>
            </p>
            <input type="button" value="加入购物车" class="today-btn">
          </li>
          <!-- 第五个 -->
          <li>
            <img src="./image/today-welcome-content-5.jpg" alt="">
            <a href="#">
              <span>6.9折/</span>
              百草味 开心果100g 坚果零食干果
            </a>
            <p>
              <span>¥39.9</span>
              <s>¥57.5</s>
            </p>
            <input type="button" value="加入购物车" class="today-btn">
          </li>
          <!-- 第六个 -->
          <li>
            <img src="./image/today-welcome-content-6.jpg" alt="">
            <a href="#">
              <span>4.4折/</span>
              百草味-夏威夷果100g 奶油味坚果
            </a>
            <p>
              <span>¥24.9</span>
              <s>¥56.90</s>
            </p>
            <input type="button" value="加入购物车" class="today-btn">
          </li>
          <!-- 第七个 -->
          <li>
            <img src="./image/today-welcome-content-7.jpg" alt="">
            <a href="#">
              卸妆皇后卸妆液500ml,还原妆前洁净肌肤！
            </a>
            <p>
              <span>¥49.9</span>
            </p>
            <input type="button" value="加入购物车" class="today-btn">
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 新版购物流程 -->
  <div class="new-edition">
    <span>

    </span>

  </div>

  <!-- 意见反馈 -->
  <div class="opinion">
    <!-- 顶部 -->
    <div class="opinion-top">
      <h2>意见反馈</h2>
      <a href="#" class="close"></a>
    </div>
    <!-- 输入框 -->
    <div class="opinion-bottom">
      <p>您的称呼&nbsp;&nbsp;<input type="text" class="txt"></p>
      <p>联系方式&nbsp;&nbsp;<input type="text" class="txt"> <span>请留下您的手机、QQ号或邮箱，方便联系</span></p>
      <p>
        <s>提交信息</s>&nbsp; <textarea name="" id="" cols="30" rows="10" class="txt">你对当页面有何意见,小美洗耳恭听哟:)
         </textarea>
      </p>
      <p class="three">
        验证码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="txt"> <img src="./image/hash_code.gif" alt="">
        看不清? <span>换一张</span>
      </p>
      <button class="submit">提 &nbsp;交</button>
    </div>
  </div>

  <!-- 遮罩层 -->
  <div class="boxq">

  </div>

  <!-- 底部 -->
  <div class="footer">
    <div class="common">
      <!-- footer-底部 -->
      <div class="footer-bottom">
        <div class="common">
          <p>

            © 2010-2018 北京创锐文化传媒有限公司 JUMEI.COM 保留一切权利。
            客服热线：400-123-8888
          </p>
          <p>
            <span>京公网安备 11010102001226 | </span>
            <a href="">京ICP证111033号|</a>
            <a href="">食品经营许可证|</a>
            <a href="">营业执照|</a>
            <a href="">ICP许可证|</a>
            <a href="">出版物经营许可证</a>
          </p>
          <p>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href="">
              <img src="./image/footer-bottom.jpg" alt="">
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>